import { defineComponent, watch, shallowReactive, nextTick, ref ,reactive, onUnmounted } from 'vue';

// 声明类型
const PropsType = {
  cdata: {
    type: Array,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 配置项
    let options = shallowReactive({ backgroundColor:null, title:null, legend:null, series: null })
    const colorLine = reactive(['#00fdb8', '#ff8d28', '#ecc321', '#219dec', '#FDB36A', '#FECE43'])
    const cdata = reactive([{
      'name': '北京',
      'value': 25
    }, {
      'name': '上海',
      'value': 20
    }, {
      'name': '广州',
      'value': 18
    }, {
      'name': '深圳',
      'value': 15
    }])
    function getRich() {
      let result = {}
      colorLine.forEach((v, i) => {
          result[`hr${i}`] = {
              backgroundColor: colorLine[i],
              borderRadius: 3,
              width: 3,
              height: 3,
              padding: [3, 3, 0, -12]
          }
          result[`a${i}`] = {
              padding: [-11, 6, -20, 6],
              color: colorLine[i],
              backgroundColor: 'transparent',
              fontSize: 12
          }
      })
      return result
  }
    // 监听
    watch(
      () => props.cdata,
      (val: any) => {
        console.log('我进入了',val)
        options = {
          backgroundColor: "#011d39",
          title: {
            text: '类 型\n占 比',
            textStyle: {
               color:'#fff'
            },
            x: "29%",
            y: "46%",
          },
          legend: {
              orient: 'vertical',
              top: 'center',
              left: '80%',
              itemGap: 30,
              itemHeight:12,
              itemWidth:12,
              formatter: params => {
                  var aim = cdata.find( item => item.name == params)
                  return `{name|${params}}{number| ${aim.value}}{unit|%}`
              },
              textStyle: {
                  lineHeight: 20,
                  color: '#fff',
                  rich:{
                      name:{
                          fontSize:16,
                          fontFamily:'PingFang-SC-Regular'
                      },
                      number:{
                          fontSize:14,
                          fontFamily:'DS-Digital-Bold',
                          padding: [0,5,0,8],
                      },
                      unit:{
                          fontSize:14,
                      }
                  }
              },
          },
          series: [{
              type: 'pie',
              radius: ['30%','45%'],
              center: ['32%', '50%'],
              clockwise: true,
              avoidLabelOverlap: true,
              label: {
                  show: true,
                  position: 'outside',
                  formatter: function(params) {
                      const name = params.name
                      const percent = params.percent + '%'
                      const index = params.dataIndex
                      return [`{a${index}|${name}：${percent}}`, `{hr${index}|}`].join('\n')
                  },
                  rich: getRich()
              },
              itemStyle: {
                  normal: {
                      color: function(params) {
                          return {
                              type: 'linear',
                              x: 0,
                              y: 0,
                              x2: 1,
                              y2: 1,
                              colorStops: [{
                                      offset: 0,
                                      color: 'rgba(0,180,255,.05)' // 0% 处的颜色
                                  },
                                  {
                                      offset: 1,
                                      color: colorLine[params.dataIndex] // 100% 处的颜色
                                  }
                              ],
                              globalCoord: false // 缺省为 false
                          }
                      }
                  }
              },
              data:cdata,
              // roseType: 'radius'//齿轮状
          },
          {
               name: "阴影圈",
               type: "pie",
               radius: ["0", "20%"],
               center: ["32%", "50%"],
               emphasis: {
                  scale: false,
               },
               tooltip: {
                  show: false,
               },
               itemStyle: {
                  color: "rgba(204,225,255, 0.05)",
               },
               zlevel: 4,
               labelLine: {
                  show: false,
               },
               data: [100],
            },]
        }
      },{
        immediate: true,
        deep: true
      }
    )
    return () => {
      const height = "400px"
      const width = "800px"

      return <div>
        <echart options={options} height={height} width={width} />
      </div>
    }
  }
})

